<?php
defined('IN_ADMIN') or exit('No permission resources.');
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>版面更换</title>
    <script src="/statics/epaper/jquery.js"></script>
</head>
<style>
  a{
    text-decoration: none;
    color: #fff;
  }
  .page-box{
    margin: 80px auto 0;
    display: flex;
    justify-content: space-around;

  }
  .page-box .img-box{
    position: relative;
  }
  .page-box .page{
    margin-bottom: 20px;
    width: 200px;
  }
  .img-box .view-picture{
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    width: 50px;
    height: 30px;
    line-height: 30px;
    background-color: rgba(86, 85, 85, 0.5);
    color: #fff;
    cursor: pointer;
  }
  .img-box .delte{
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
    width: 50px;
    height: 30px;
    line-height: 30px;
    background-color: rgba(86, 85, 85, 0.5);
    color: #fff;
    display: none;
    cursor: pointer;
  }
  .img-box .save-btn{
    text-align: center;
    line-height: 30px;
    width: 100px;
    height: 30px;
    position: absolute;
    bottom: -30px;
    left: 50%;
    margin-left: -50px;
    background-color: rgba(236, 8, 8, 0.8);
    color: #fff;
    cursor: pointer;
    border-radius: 10px;
    display: none;
  }
  .add-box{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -40px;
    margin-top: -40px;
  }
  .sctp{
      position: relative;
  }
  .sctp .add{
    width: 80px;
    height: 80px;
  }
  .iptsc{
      width: 80px;
      height: 80px;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
  }
</style>
<body>
    <div class="page-box">
	  <?php foreach($data as $ind=>$val){?>
		<div class="img-box ">
			<div class="view-picture"><a href="<?php echo $val['page_image']?>" target="_blank" rel="noopener noreferrer">查 看</a></div>
			<div class="delte" id="delImg-<?php echo $ind?>" onclick="delImg(<?php echo $ind?>,'<?php echo $val['page_image']?>')" >删 除</div>
			<img class="page" id="img-<?php echo $ind?>" src="<?php echo $val['page_image'].'?'.time()?>" id="photo" alt="<?php echo $val['page_name']?>">
			<div class="add-box" id="add-box-<?php echo $ind?>">
			<div class="sctp">
				<img src="statics/epaper/add.jpg" class="add" id="add-img-<?php echo $ind?>" alt="" />
				<input class="iptsc" type="file" name="file" id="file-<?php echo $ind?>" onchange="chooseImage(<?php echo $ind?>)" />
				<input type="hidden" id="fileVal">
			</div>
			</div>
			<div class="save-btn" id="submit-btn-<?php echo $ind?>" onclick="submitImg(<?php echo $ind?>,'<?php echo $val['page_image']?>')">提 交</div>
		</div>
	  <?php }?>
    </div>
</body>
<script>
  
  //触发上传图片
  // $('#file').on('change', function () {
  //     chooseImage('file', 'img-0', 'fileVal'); 
  // });

  var business_photo = ''
  function chooseImage(id) {
      var fileObj = document.getElementById('file-'+id); 
      if (typeof (fileObj) == "undefined" || fileObj.files.length == 0) {
           console.log('file ' + fileid + ' not exists');
           return;
      }
      var file = fileObj.files[0];
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function (e) {
          var imgResult = e.target.result;
          $('#delImg-'+id).show()//删除按钮显示
          $('#submit-btn-'+id).show()//提交按钮显示
          $('#add-box-'+id).hide()//上传按钮隐藏
          var imgObj = document.getElementById('img-'+id);
          if (typeof (imgObj) != "undefined") {
              imgObj.setAttribute("src", imgResult);
          }
          // var fileValObj = document.getElementById(fileValId);
          // if (typeof (fileValObj) != "undefined") {
          //     fileValObj.setAttribute("value", imgResult);
          // }

      };

  };
  function submitImg(id,image){
      var formData = new FormData(); 
      formData.append("file",document.getElementById('file-'+id).files[0]);
      formData.append("image",image);
      // console.log(formData)
      $.ajax({  
          url : '/index.php?m=epaper&c=preview&a=image_update&pc_hash=<?php echo $_GET['pc_hash']?>',
          type : 'POST',  
          data : formData,  
          processData : false, // 告诉jQuery不要去处理发送的数据
          contentType : false,// 告诉jQuery不要去设置Content-Type请求头
          beforeSend:function(){
            console.log("正在进行，请稍候");
            $('#submit-btn-'+id).hide()//提交按钮显示
          },
          success : function(res) {
            console.log(res)
            alert(res);
            window.location.reload()
          },
          error : function(responseStr) { 
              console.log("error");
              alert("修改失败");
          }  
      });
  }

  function delImg(id,oldimg){
    //1、删除刚才上传的图片
    $('#delImg-'+id).hide()//删除按钮显示
    $('#submit-btn-'+id).hide()//提交按钮显示
    $('#add-box-'+id).show()//上传按钮隐藏
    var imgObj = document.getElementById('img-'+id);
    if (typeof (imgObj) != "undefined") {
        imgObj.setAttribute("src", oldimg);
    }
  }
</script>
</html>